<template>
    <div>
        <el-row style="height:120px;text-align: center;">
<!--            <el-col :span="4" :xs="24" style="height:100%">-->
<!--                <el-card  style="height:100%;font-size:14px;width:95%">-->
<!--                    <el-row style="font-size:20px;font-weight:bold;">-->
<!--                        <span>-->
<!--                            氮 气-->
<!--                        </span>-->
<!--                    </el-row>-->
<!--                    <div >-->
<!--                        <el-row style="margin-top: 8px;">-->
<!--                            <el-col :span="12" class="param-title">-->
<!--                               <div>压力(Mpa)</div>-->
<!--                            </el-col>-->
<!--                            <el-col :span="12">-->
<!--                                <el-tag style="width: 100%">-->
<!--                                    {{decimal(realTimeData.st3_dqzg_p,2)}}-->
<!--                                </el-tag>-->
<!--                            </el-col>-->
<!--                        </el-row>-->
<!--                        <el-row style="margin-top: 5px;">-->
<!--                            <el-col :span="12" class="param-title">-->
<!--                               <div>温度(℃)</div>-->
<!--                            </el-col>-->
<!--                            <el-col :span="12">-->
<!--                                <el-tag style="width: 100%">-->
<!--                                    {{decimal(realTimeData.st3_dqzg_t,2)}}-->
<!--                                </el-tag>-->
<!--                            </el-col>-->
<!--                        </el-row>-->
<!--                        <el-row style="margin-top: 5px;">-->
<!--                            <el-col :span="12" class="param-title">-->
<!--                               <div>流量(m³/h)</div>-->
<!--                            </el-col>-->
<!--                            <el-col :span="12">-->
<!--                                <el-tag style="width: 100%">-->
<!--                                    {{decimal(realTimeData.st3_dqzg_f,2)}}-->
<!--                                </el-tag>-->
<!--                            </el-col>-->
<!--                        </el-row>-->
<!--                        <el-row style="margin-top: 5px;">-->
<!--                            <el-col :span="12" class="param-title">-->
<!--                               <div>累积流量(m³/h)</div>-->
<!--                            </el-col>-->
<!--                            <el-col :span="12">-->
<!--                                <el-tag style="width: 100%">-->
<!--                                    {{decimal(realTimeData.st3_dqzg_lf,2)}}-->
<!--                                </el-tag>-->
<!--                            </el-col>-->
<!--                        </el-row>-->
<!--                    </div>-->


<!--                </el-card>-->
<!--            </el-col>-->
<!--            <el-col :span="4" :xs="24" style="height:100%">-->
<!--                <el-card  style="height:100%;font-size:14px;width:95%">-->
<!--                    <el-row style="font-size:20px;font-weight:bold;">-->
<!--                        <span>-->
<!--                            点火富氧-->
<!--                        </span>-->
<!--                    </el-row>-->
<!--                    <div >-->
<!--                        <el-row style="margin-top: 8px;">-->
<!--                            <el-col :span="12" class="param-title">-->
<!--                               <div>压力(Mpa)</div>-->
<!--                            </el-col>-->
<!--                            <el-col :span="12">-->
<!--                                <el-tag style="width: 100%">-->
<!--                                    {{decimal(realTimeData.st3_dhfzy_p,2)}}-->
<!--                                </el-tag>-->
<!--                            </el-col>-->
<!--                        </el-row>-->
<!--                        <el-row style="margin-top: 5px;">-->
<!--                            <el-col :span="12" class="param-title">-->
<!--                               <div>温度(℃)</div>-->
<!--                            </el-col>-->
<!--                            <el-col :span="12">-->
<!--                                <el-tag style="width: 100%">-->
<!--                                    {{decimal(realTimeData.st3_dhfzy_t,2)}}-->
<!--                                </el-tag>-->
<!--                            </el-col>-->
<!--                        </el-row>-->
<!--                        <el-row style="margin-top: 5px;">-->
<!--                            <el-col :span="12" class="param-title">-->
<!--                               <div>流量(m³/h)</div>-->
<!--                            </el-col>-->
<!--                            <el-col :span="12">-->
<!--                                <el-tag style="width: 100%">-->
<!--                                    {{decimal(realTimeData.st3_dhfzy_f,2)}}-->
<!--                                </el-tag>-->
<!--                            </el-col>-->
<!--                        </el-row>-->
<!--                        <el-row style="margin-top: 5px;">-->
<!--                            <el-col :span="12" class="param-title">-->
<!--                               <div>累积流量(m³/h)</div>-->
<!--                            </el-col>-->
<!--                            <el-col :span="12">-->
<!--                                <el-tag style="width: 100%">-->
<!--                                    {{decimal(realTimeData.st3_dhfzy_lf,2)}}-->
<!--                                </el-tag>-->
<!--                            </el-col>-->
<!--                        </el-row>-->
<!--                    </div>-->


<!--                </el-card>-->
<!--            </el-col>-->
<!--            <el-col :span="4" :xs="24" style="height:100%">-->
<!--                <el-card  style="height:100%;font-size:14px;width:95%">-->
<!--                    <el-row style="font-size:20px;font-weight:bold;">-->
<!--                        <span>-->
<!--                            烟气富氧-->
<!--                        </span>-->
<!--                    </el-row>-->
<!--                    <div >-->
<!--                        <el-row style="margin-top: 8px;">-->
<!--                            <el-col :span="12" class="param-title">-->
<!--                               <div>压力(Mpa)</div>-->
<!--                            </el-col>-->
<!--                            <el-col :span="12">-->
<!--                                <el-tag style="width: 100%">-->
<!--                                    {{decimal(realTimeData.st3_yqhyzy_p,2)}}-->
<!--                                </el-tag>-->
<!--                            </el-col>-->
<!--                        </el-row>-->
<!--                        <el-row style="margin-top: 5px;">-->
<!--                            <el-col :span="12" class="param-title">-->
<!--                               <div>温度(℃)</div>-->
<!--                            </el-col>-->
<!--                            <el-col :span="12">-->
<!--                                <el-tag style="width: 100%">-->
<!--                                    {{decimal(realTimeData.st3_yqhyzy_t,2)}}-->
<!--                                </el-tag>-->
<!--                            </el-col>-->
<!--                        </el-row>-->
<!--                        <el-row style="margin-top: 5px;">-->
<!--                            <el-col :span="12" class="param-title">-->
<!--                               <div>流量(m³/h)</div>-->
<!--                            </el-col>-->
<!--                            <el-col :span="12">-->
<!--                                <el-tag style="width: 100%">-->
<!--                                    {{decimal(realTimeData.st3_yqhyzy_f,2)}}-->
<!--                                </el-tag>-->
<!--                            </el-col>-->
<!--                        </el-row>-->
<!--                        <el-row style="margin-top: 5px;">-->
<!--                            <el-col :span="12" class="param-title">-->
<!--                               <div>累积流量(m³/h)</div>-->
<!--                            </el-col>-->
<!--                            <el-col :span="12">-->
<!--                                <el-tag style="width: 100%">-->
<!--                                    {{decimal(realTimeData.st3_yqhyzy_lf,2)}}-->
<!--                                </el-tag>-->
<!--                            </el-col>-->
<!--                        </el-row>-->
<!--                    </div>-->


<!--                </el-card>-->
<!--            </el-col>-->
<!--            <el-col :span="4" :xs="24" style="height:100%">-->
<!--                <el-card  style="height:100%;font-size:14px;width:95%">-->
<!--                    <el-row style="font-size:20px;font-weight:bold;">-->
<!--                        <span>-->
<!--                            蒸 汽-->
<!--                        </span>-->
<!--                    </el-row>-->
<!--                    <div >-->
<!--                        <el-row style="margin-top: 8px;">-->
<!--                            <el-col :span="12" class="param-title">-->
<!--                               <div>压力(Mpa)</div>-->
<!--                            </el-col>-->
<!--                            <el-col :span="12">-->
<!--                                <el-tag style="width: 100%">-->
<!--                                    {{decimal(realTimeData.st3_zqzg_p,2)}}-->
<!--                                </el-tag>-->
<!--                            </el-col>-->
<!--                        </el-row>-->
<!--                        <el-row style="margin-top: 5px;">-->
<!--                            <el-col :span="12" class="param-title">-->
<!--                               <div>温度(℃)</div>-->
<!--                            </el-col>-->
<!--                            <el-col :span="12">-->
<!--                                <el-tag style="width: 100%">-->
<!--                                    {{decimal(realTimeData.st3_zqzg_t,2)}}-->
<!--                                </el-tag>-->
<!--                            </el-col>-->
<!--                        </el-row>-->
<!--                        <el-row style="margin-top: 5px;">-->
<!--                            <el-col :span="12" class="param-title">-->
<!--                               <div>流量(m³/h)</div>-->
<!--                            </el-col>-->
<!--                            <el-col :span="12">-->
<!--                                <el-tag style="width: 100%">-->
<!--                                    {{decimal(realTimeData.st3_zqzg_f,2)}}-->
<!--                                </el-tag>-->
<!--                            </el-col>-->
<!--                        </el-row>-->
<!--                        <el-row style="margin-top: 5px;">-->
<!--                            <el-col :span="12" class="param-title">-->
<!--                               <div>累积流量(m³/h)</div>-->
<!--                            </el-col>-->
<!--                            <el-col :span="12">-->
<!--                                <el-tag style="width: 100%">-->
<!--                                    {{decimal(realTimeData.st3_zqzg_lf,2)}}-->
<!--                                </el-tag>-->
<!--                            </el-col>-->
<!--                        </el-row>-->
<!--                    </div>-->


<!--                </el-card>-->
<!--            </el-col>-->
            <el-col :span="12" :xs="24" style="height:100%">
                <el-card  style="height:100%;font-size:14px;width:95%">
                    <el-row style="font-size:20px;font-weight:bold;">
                        <span>
                            空 气
                        </span>
                    </el-row>
                    <div >
                        <el-row style="margin-top: 8px;">
                            <el-col :span="6" class="param-title">
                               <div>压力(Mpa)</div>
                            </el-col>
                            <el-col :span="6">
                                <el-tag style="width: 100%">
                                    {{decimal(realTimeData.st3_kqzg_p,2)}}
                                </el-tag>
                            </el-col>
<!--                        </el-row>-->
<!--                        <el-row style="margin-top: 8px;">-->
                            <el-col :span="6" class="param-title">
                               <div>温度(℃)</div>
                            </el-col>
                            <el-col :span="6">
                                <el-tag style="width: 100%">
                                    {{decimal(realTimeData.st3_c_sl_ti0572,2)}}
                                </el-tag>
                            </el-col>
                        </el-row>
                        <el-row style="margin-top: 8px;">
                            <el-col :span="6" class="param-title">
                               <div>流量(m³/h)</div>
                            </el-col>
                            <el-col :span="6">
                                <el-tag style="width: 100%">
                                    {{decimal(realTimeData.st3_kqzg_f,2)}}
                                </el-tag>
                            </el-col>
<!--                        </el-row>-->
<!--                        <el-row style="margin-top: 8px;">-->
                            <el-col :span="6" class="param-title">
                               <div>累积流量(m³/h)</div>
                            </el-col>
                            <el-col :span="6">
                                <el-tag style="width: 100%">
                                    {{decimal(realTimeData.st3_kqzg_lf,2)}}
                                </el-tag>
                            </el-col>
                        </el-row>
                    </div>


                </el-card>
            </el-col>
            <el-col :span="12" :xs="24" style="height:100%">
                <el-card  style="height:100%;font-size:14px;width:95%">
                    <el-row style="font-size:20px;font-weight:bold;">
                        <span>
                            煤 气
                        </span>
                    </el-row>
                    <div >
                        <el-row style="margin-top: 8px;">
                            <el-col :span="6" class="param-title">
                               <div>压力(Mpa)</div>
                            </el-col>
                            <el-col :span="6">
                                <el-tag style="width: 100%">
                                    {{decimal(realTimeData.st3_gmqzg_p,2)}}
                                </el-tag>
                            </el-col>
<!--                        </el-row>-->
<!--                        <el-row style="margin-top: 5px;">-->
                            <el-col :span="6" class="param-title">
                               <div>温度(℃)</div>
                            </el-col>
                            <el-col :span="6">
                                <el-tag style="width: 100%">
                                    {{decimal(realTimeData.st3_gmqzg_t,2)}}
                                </el-tag>
                            </el-col>
                        </el-row>
                        <el-row style="margin-top: 5px;">
                            <el-col :span="6" class="param-title">
                               <div>流量(m³/h)</div>
                            </el-col>
                            <el-col :span="6">
                                <el-tag style="width: 100%">
                                    {{decimal(realTimeData.st3_gmqzg_f,2)}}
                                </el-tag>
                            </el-col>
<!--                        </el-row>-->
<!--                        <el-row style="margin-top: 5px;">-->
                            <el-col :span="6" class="param-title">
                               <div>累积流量(m³/h)</div>
                            </el-col>
                            <el-col :span="6">
                                <el-tag style="width: 100%">
                                    {{decimal(realTimeData.st3_gmqzg_lf,2)}}
                                </el-tag>
                            </el-col>
                        </el-row>
                    </div>


                </el-card>
            </el-col>
        </el-row>
        <el-form :model="queryParams" ref="queryForm" :inline="true" >
        <el-form-item label="时间范围" prop="dateRange">
            <el-date-picker
            v-model="dateRange"
            type="datetimerange"
            value-format="yyyy-MM-dd HH:mm:ss"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            align="left"
            size="small">
            </el-date-picker>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" icon="el-icon-search" size="mini" @click="drawChart">搜索</el-button>
            <el-button icon="el-icon-refresh" size="mini" @click="reset">重置</el-button>
        </el-form-item>
        </el-form>
        <el-row >
            <el-col :span="12" :xs="24">
                <div ref="chart1" :style="{height: chartHeight + 'px' }"></div>
            </el-col>
            <el-col :span="12" :xs="24">
                <div ref="chart2" :style="{height: chartHeight + 'px' }"></div>
            </el-col>
            </el-row>
            <el-row >
            <el-col :span="12" :xs="24">
                <div ref="chart3" :style="{height: chartHeight + 'px' }"></div>
            </el-col>
            <el-col :span="12" :xs="24">
                <div ref="chart4" :style="{height: chartHeight + 'px' }"></div>
            </el-col>
        </el-row>
    </div>
</template>
<script>
  import { getRealTimeInfo,getEnergyChartAll } from "@/api/app/energy/medium";
  import * as echarts from 'echarts'
  export default {
      name: "actual",
    data() {
      return {
        timer: null,
        dateRange: [this.moment().subtract('hours', 1).format('YYYY-MM-DD HH:mm:ss'), this.moment().format('YYYY-MM-DD HH:mm:ss')],
        queryParams: {
            beginTime: null,
            endTime: null,
        },
        seriesDateDqP: [],
        seriesDateDqT: [],
        seriesDateDqF: [],
        seriesDateDqLF: [],
        seriesDateDhP: [],
        seriesDateDhT: [],
        seriesDateDhF: [],
        seriesDateDhLF: [],
        seriesDateYqP: [],
        seriesDateYqT: [],
        seriesDateYqF: [],
        seriesDateYqLF: [],
        seriesDateZqP: [],
        seriesDateZqT: [],
        seriesDateZqF: [],
        seriesDateZqLF: [],
        seriesDateKqP: [],
        seriesDateKqT: [],
        seriesDateKqF: [],
        seriesDateKqLF: [],
        seriesDateMqP: [],
        seriesDateMqT: [],
        seriesDateMqF: [],
        seriesDateMqLF: [],
        realTimeData: {
            st3_dhfzy_f: 0,
            st3_dhfzy_lf:0,
            st3_dhfzy_p: 0,
            st3_dhfzy_t: 0,
            st3_dqzg_f: 0,
            st3_dqzg_lf: 0,
            st3_dqzg_p: 0,
            st3_dqzg_t: 0,
            st3_gmqzg_f: 0,
            st3_gmqzg_lf:0,
            st3_gmqzg_p: 0,
            st3_gmqzg_t: 0,
            st3_kqzg_f: 0,
            st3_kqzg_lf: 0,
            st3_kqzg_p: 0,
          st3_c_sl_ti0572: 0,
            st3_yqhyzy_f:0,
            st3_yqhyzy_lf:0,
            st3_yqhyzy_p:0,
            st3_yqhyzy_t:0,
            st3_zqzg_f: 0,
            st3_zqzg_lf: 0,
            st3_zqzg_p: 0,
            st3_zqzg_t: 0,
        },
        chartHeight: 350
      }
    },
    mounted() {
        window.onresize = () => {
            return (() => {
                this.chartHeight = (window.innerHeight -250)/2  + "px";
            })();
        };

        this.drawChart();
        this.realTimeInfo()
        this.timer = setInterval(() => {
            this.realTimeInfo()
        }, 1000)
    },
    beforeDestroy() {
        this.timer && clearInterval(this.timer)
        this.timer=null;
    },
    methods: {
        decimal(number, digit) {
            return parseFloat(parseFloat(number).toFixed(digit))
        },
        //获取实时数据
        realTimeInfo(){
            getRealTimeInfo().then(res =>{
                this.realTimeData = res.data
            })
        },
        //查询时间重置
        reset(){
            this.dateRange = [this.moment().subtract('hours', 1).format('YYYY-MM-DD HH:mm:ss'), this.moment().format('YYYY-MM-DD HH:mm:ss')]
            this.queryParams.beginTime = null;
        },
        drawChart() {
            this.queryParams.beginTime = null
            this.queryParams.endTime = null
            if (this.dateRange) {
                this.queryParams.beginTime = this.dateRange[0]
                this.queryParams.endTime = this.dateRange[1]
            }
            getEnergyChartAll(this.queryParams).then(res => {
                let list = res.data
                let series1 = []
                let series2 = []
                let series3 = []
                let series4 = []
                this.seriesDateDqP = []
                this.seriesDateDqT = []
                this.seriesDateDqF = []
                this.seriesDateDqLF = []
                this.seriesDateDhP = []
                this.seriesDateDhT = []
                this.seriesDateDhF = []
                this.seriesDateDhLF = []
                this.seriesDateYqP = []
                this.seriesDateYqT = []
                this.seriesDateYqF = []
                this.seriesDateYqLF = []
                this.seriesDateZqP = []
                this.seriesDateZqT = []
                this.seriesDateZqF = []
                this.seriesDateZqLF = []
                this.seriesDateKqP = []
                this.seriesDateKqT = []
                this.seriesDateKqF = []
                this.seriesDateKqLF = []
                this.seriesDateMqP = []
                this.seriesDateMqT = []
                this.seriesDateMqF = []
                this.seriesDateMqLF = []
                if(list!=null){
                    Object.keys(list).forEach(key => {
                        // if(key.includes("氮气")){
                        //     if(key.includes("压力")){
                        //         for (let i = 0; i < list[key].length; i++) {
                        //             this.seriesDateDqP.push([list[key][i].dt, list[key][i].value])
                        //         }
                        //     }else if(key.includes("温度")){
                        //         for (let i = 0; i < list[key].length; i++) {
                        //             this.seriesDateDqT.push([list[key][i].dt, list[key][i].value])
                        //         }
                        //     }else if(key.includes("累积流量")){
                        //         for (let i = 0; i < list[key].length; i++) {
                        //             this.seriesDateDqLF.push([list[key][i].dt, list[key][i].value])
                        //         }
                        //     }else if(key.includes("流量")){
                        //         for (let i = 0; i < list[key].length; i++) {
                        //             this.seriesDateDqF.push([list[key][i].dt, list[key][i].value])
                        //         }
                        //     }
                        // }else if(key.includes("点火炉富氧")){
                        //     if(key.includes("压力")){
                        //         for (let i = 0; i < list[key].length; i++) {
                        //             this.seriesDateDhP.push([list[key][i].dt, list[key][i].value])
                        //         }
                        //     }else if(key.includes("温度")){
                        //         for (let i = 0; i < list[key].length; i++) {
                        //             this.seriesDateDhT.push([list[key][i].dt, list[key][i].value])
                        //             // console.log([list[key][i].dt, list[key][i].value])
                        //         }
                        //     }else if(key.includes("累积流量")){
                        //         for (let i = 0; i < list[key].length; i++) {
                        //             this.seriesDateDhLF.push([list[key][i].dt, list[key][i].value])
                        //         }
                        //     }else if(key.includes("流量")){
                        //         for (let i = 0; i < list[key].length; i++) {
                        //             this.seriesDateDhF.push([list[key][i].dt, list[key][i].value])
                        //         }
                        //     }
                        // }else if(key.includes("烟气循环富氧")){
                        //     if(key.includes("压力")){
                        //         for (let i = 0; i < list[key].length; i++) {
                        //             this.seriesDateYqP.push([list[key][i].dt, list[key][i].value])
                        //         }
                        //     }else if(key.includes("温度")){
                        //         for (let i = 0; i < list[key].length; i++) {
                        //             this.seriesDateYqT.push([list[key][i].dt, list[key][i].value])
                        //         }
                        //     }else if(key.includes("累积流量")){
                        //         for (let i = 0; i < list[key].length; i++) {
                        //             this.seriesDateYqLF.push([list[key][i].dt, list[key][i].value])
                        //         }
                        //     }else if(key.includes("流量")){
                        //         for (let i = 0; i < list[key].length; i++) {
                        //             this.seriesDateYqF.push([list[key][i].dt, list[key][i].value])
                        //         }
                        //     }
                        // }else if(key.includes("蒸汽")){
                        //     if(key.includes("压力")){
                        //         for (let i = 0; i < list[key].length; i++) {
                        //             this.seriesDateZqP.push([list[key][i].dt, list[key][i].value])
                        //         }
                        //     }else if(key.includes("温度")){
                        //         for (let i = 0; i < list[key].length; i++) {
                        //             this.seriesDateZqT.push([list[key][i].dt, list[key][i].value])
                        //         }
                        //     }else if(key.includes("累积流量")){
                        //         for (let i = 0; i < list[key].length; i++) {
                        //             this.seriesDateZqLF.push([list[key][i].dt, list[key][i].value])
                        //         }
                        //     }else if(key.includes("流量")){
                        //         for (let i = 0; i < list[key].length; i++) {
                        //             this.seriesDateZqF.push([list[key][i].dt, list[key][i].value])
                        //         }
                        //     }
                        // }else
                      if(key.includes("空气")){
                            if(key.includes("压力")){
                                for (let i = 0; i < list[key].length; i++) {
                                    this.seriesDateKqP.push([list[key][i].dt, list[key][i].value])
                                }
                            }else if(key.includes("温度")){
                                for (let i = 0; i < list[key].length; i++) {
                                    this.seriesDateKqT.push([list[key][i].dt, list[key][i].value])
                                }
                            }else if(key.includes("累积流量")){
                                for (let i = 0; i < list[key].length; i++) {
                                    this.seriesDateKqLF.push([list[key][i].dt, list[key][i].value])
                                }
                            }else if(key.includes("流量")){
                                for (let i = 0; i < list[key].length; i++) {
                                    this.seriesDateKqF.push([list[key][i].dt, list[key][i].value])
                                }
                            }
                        }else if(key.includes("煤气")){
                            if(key.includes("压力")){
                                for (let i = 0; i < list[key].length; i++) {
                                    this.seriesDateMqP.push([list[key][i].dt, list[key][i].value])
                                }
                            }else if(key.includes("温度")){
                                for (let i = 0; i < list[key].length; i++) {
                                    this.seriesDateMqT.push([list[key][i].dt, list[key][i].value])
                                }
                            }else if(key.includes("累积流量")){
                                for (let i = 0; i < list[key].length; i++) {
                                    this.seriesDateMqLF.push([list[key][i].dt, list[key][i].value])
                                }
                            }else if(key.includes("流量")){
                                for (let i = 0; i < list[key].length; i++) {
                                    this.seriesDateMqF.push([list[key][i].dt, list[key][i].value])
                                }
                            }
                        }
                    })
                }
                // series1.push({
                //     name: "氮气压力",
                //     type: 'line',
                //     yAxisIndex: 0,
                //     data: this.seriesDateDqP
                // })
                // series1.push({
                //     name: "点火富氧压力",
                //     type: 'line',
                //     yAxisIndex: 0,
                //     data: this.seriesDateDhP
                // })
                // series1.push({
                //     name: "烟气富氧压力",
                //     type: 'line',
                //     yAxisIndex: 0,
                //     data: this.seriesDateYqP
                // })
                // series1.push({
                //     name: "蒸汽压力",
                //     type: 'line',
                //     yAxisIndex: 0,
                //     data: this.seriesDateZqP
                // })
                series1.push({
                    name: "空气压力",
                    type: 'line',
                    yAxisIndex: 0,
                    data: this.seriesDateKqP
                })
                series1.push({
                    name: "煤气压力",
                    type: 'line',
                    yAxisIndex: 0,
                    data: this.seriesDateMqP
                })
                // series2.push({
                //     name: "氮气温度",
                //     type: 'line',
                //     yAxisIndex: 0,
                //     data: this.seriesDateDqT
                // })
                // series2.push({
                //     name: "点火富氧温度",
                //     type: 'line',
                //     yAxisIndex: 0,
                //     data: this.seriesDateDhT
                // })
                // series2.push({
                //     name: "烟气富氧温度",
                //     type: 'line',
                //     yAxisIndex: 0,
                //     data: this.seriesDateYqT
                // })
                // series2.push({
                //     name: "蒸汽温度",
                //     type: 'line',
                //     yAxisIndex: 0,
                //     data: this.seriesDateZqT
                // })
                series2.push({
                    name: "空气温度",
                    type: 'line',
                    yAxisIndex: 0,
                    data: this.seriesDateKqT
                })
                series2.push({
                    name: "煤气温度",
                    type: 'line',
                    yAxisIndex: 0,
                    data: this.seriesDateMqT
                })
                // series3.push({
                //     name: "氮气流量",
                //     type: 'line',
                //     yAxisIndex: 0,
                //     data: this.seriesDateDqF
                // })
                // series3.push({
                //     name: "点火富氧流量",
                //     type: 'line',
                //     yAxisIndex: 0,
                //     data: this.seriesDateDhF
                // })
                // series3.push({
                //     name: "烟气富氧流量",
                //     type: 'line',
                //     yAxisIndex: 0,
                //     data: this.seriesDateYqF
                // })
                // series3.push({
                //     name: "蒸汽流量",
                //     type: 'line',
                //     yAxisIndex: 0,
                //     data: this.seriesDateZqF
                // })
                series3.push({
                    name: "空气流量",
                    type: 'line',
                    yAxisIndex: 0,
                    data: this.seriesDateKqF
                })
                series3.push({
                    name: "煤气流量",
                    type: 'line',
                    yAxisIndex: 0,
                    data: this.seriesDateMqF
                })
                // series4.push({
                //     name: "氮气累积流量",
                //     type: 'line',
                //     yAxisIndex: 0,
                //     data: this.seriesDateDqLF
                // })
                // series4.push({
                //     name: "点火富氧累积流量",
                //     type: 'line',
                //     yAxisIndex: 0,
                //     data: this.seriesDateDhLF
                // })
                // series4.push({
                //     name: "烟气富氧累积流量",
                //     type: 'line',
                //     yAxisIndex: 0,
                //     data: this.seriesDateYqLF
                // })
                // series4.push({
                //     name: "蒸汽累积流量",
                //     type: 'line',
                //     yAxisIndex: 0,
                //     data: this.seriesDateZqLF
                // })
                series4.push({
                    name: "空气累积流量",
                    type: 'line',
                    yAxisIndex: 0,
                    data: this.seriesDateKqLF
                })
                series4.push({
                    name: "煤气累积流量",
                    type: 'line',
                    yAxisIndex: 0,
                    data: this.seriesDateMqLF
                })
                this.getChart1(series1)
                this.getChart2(series2)
                this.getChart3(series3)
                this.getChart4(series4)
            })
        },
        getChart1(series) {
            var chartDom1 = this.$refs['chart1'];
            var myChart1 = echarts.init(chartDom1);
            myChart1.clear()
            var option1;
            const colors = ['#5470C6', '#c25d5d', '#5c9293', '#ffaa8c'];

            option1 = {
                title: {
                text: '压力',
                left: 'center',
                },
                tooltip: {
                trigger: 'axis'
                },
                legend: {

                    top:'10%'
                },
                grid: {
                left: '3%',
                right: '3%',
                bottom: '8%',
                top: '20%',
                containLabel: true
                },
                // toolbox: {
                //   feature: {
                //     saveAsImage: {}
                //   }
                // },
                dataZoom: [
                {
                    show: true,
                    realtime: true,
                    start: 0,
                    end: 100,
                    height: 10,
                    bottom: '3%',
                },
                {
                    type: 'inside',
                    realtime: true,
                    start: 0,
                    end: 100,
                    height: 10
                }
                ],
                xAxis: {
                type: 'category',
                boundaryGap: true,
                data: this.dtHourList
                },
                yAxis:
                {
                    type: 'value',
                    alignTicks: true,
                    axisLine: {
                    show: true,
                    lineStyle: {
                        color: colors[0]
                    }
                    },
                    axisLabel: {
                    formatter: '{value}'
                    }
                },
                series: series,
                // {
                //     name: 'Mpa',
                //     type: 'line',
                //     yAxisIndex: 0,
                //     data: this.seriesDateP
                // },
            };
            option1 && myChart1.setOption(option1);
            myChart1.resize();
        },
        getChart2(series) {
            var chartDom2 = this.$refs['chart2'];
            var myChart2 = echarts.init(chartDom2);
            myChart2.clear()
            var option2;
            const colors = ['#5470C6', '#c25d5d', '#5c9293', '#ffaa8c'];

            option2 = {
                title: {
                text: '温度',
                left: 'center',
                },
                tooltip: {
                trigger: 'axis'
                },
                legend: {

                    top:'10%'
                },
                grid: {
                left: '3%',
                right: '3%',
                bottom: '8%',
                top: '20%',
                containLabel: true
                },
                // toolbox: {
                //   feature: {
                //     saveAsImage: {}
                //   }
                // },
                dataZoom: [
                {
                    show: true,
                    realtime: true,
                    start: 0,
                    end: 100,
                    height: 10,
                    bottom: '3%',
                },
                {
                    type: 'inside',
                    realtime: true,
                    start: 0,
                    end: 100,
                    height: 10
                }
                ],
                xAxis: {
                type: 'category',
                boundaryGap: true,
                data: this.dtHourList
                },
                yAxis:
                {
                    type: 'value',
                    alignTicks: true,
                    axisLine: {
                    show: true,
                    lineStyle: {
                        color: colors[1]
                    }
                    },
                    axisLabel: {
                    formatter: '{value}'
                    }
                },
                series: series,
                // {
                //     name: '℃',
                //     type: 'line',
                //     data: this.seriesDateT
                // },
            };
            option2 && myChart2.setOption(option2);

            myChart2.resize();
        },
        getChart3(series) {
            var chartDom3 = this.$refs['chart3'];
            var myChart3 = echarts.init(chartDom3);
            myChart3.clear()
            var option3;
            const colors = ['#5470C6', '#c25d5d', '#5c9293', '#ffaa8c'];

            option3 = {
                title: {
                text: '流量',
                left: 'center',
                },
                tooltip: {
                trigger: 'axis'
                },
                legend: {

                    top:'10%'
                },
                grid: {
                left: '3%',
                right: '3%',
                bottom: '8%',
                top: '20%',
                containLabel: true
                },
                dataZoom: [
                {
                    show: true,
                    realtime: true,
                    start: 0,
                    end: 100,
                    height: 10,
                    bottom: '3%',
                },
                {
                    type: 'inside',
                    realtime: true,
                    start: 0,
                    end: 100,
                    height: 10
                }
                ],
                xAxis: {
                type: 'category',
                boundaryGap: true,
                data: this.dtHourList
                },
                yAxis:
                {
                    type: 'value',
                    alignTicks: true,
                    axisLine: {
                    show: true,
                    lineStyle: {
                        color: colors[2]
                    }
                    },
                    axisLabel: {
                    formatter: '{value}'
                    }
                },
                series: series,
                // {
                //     name: 'm³/h',
                //     type: 'line',
                //     data: this.seriesDateF
                // },
            };
            option3 && myChart3.setOption(option3);
            myChart3.resize();
        },
        getChart4(series) {
            var chartDom4 = this.$refs['chart4'];
            var myChart4 = echarts.init(chartDom4);
            myChart4.clear()
            var option4;
            const colors = ['#5470C6', '#c25d5d', '#5c9293', '#3e7742'];

            option4 = {
                title: {
                text: '累积流量',
                left: 'center',
                },
                tooltip: {
                trigger: 'axis'
                },
                legend: {

                    top:'10%'
                },
                grid: {
                left: '3%',
                right: '3%',
                bottom: '8%',
                top: '20%',
                containLabel: true
                },
                dataZoom: [
                {
                    show: true,
                    realtime: true,
                    start: 0,
                    end: 100,
                    height: 10,
                    bottom: '3%',
                },
                {
                    type: 'inside',
                    realtime: true,
                    start: 0,
                    end: 100,
                    height: 10
                }
                ],
                xAxis: {
                type: 'category',
                boundaryGap: true,
                data: this.dtHourList
                },
                yAxis:
                {
                    type: 'value',
                    alignTicks: true,
                    axisLine: {
                    show: true,
                    lineStyle: {
                        color: colors[3]
                    }
                    },
                    axisLabel: {
                    formatter: '{value}'
                    }
                },
                series: series,
                // {
                //     name: 'm³/h',
                //     type: 'line',
                //     yAxisIndex: 0,
                //     data: this.seriesDateLF
                // },
            };
            option4 && myChart4.setOption(option4);
            myChart4.resize();
        },
    }
  }
</script>

<style lang="scss"  scoped>
 .param-title{
    height:28px;
    display:flex;
    align-items:center;
    justify-content: center;
 }
</style>
